<template>
  <div class="view-container">
    <input
      id="imgUpload"
      ref="imgUpload"
      class="img-upload-input"
      type="file"
      accept="image/*"
      @change="handleUpload"
    >
    <div
      contenteditable
      class="upload-container"
      @drop="handleDrop"
      @dragover="handleDragover"
      @dragenter="handleDragover"
    >
      <el-button class="text-button full-button" title="选择图片" @click="handleImgClick">
        <svg-icon icon-class="el-icon-picture" />
        <div class="tip-text">拖拽图片上传</div>
      </el-button>
    </div>
    <div v-if="imgSrc" class="preview-contain">
      <img :src="imgSrc">
    </div>
  </div>
</template>

<script>
import { uploadImg } from '@a/personInfo.js'

export default {
  props: {
    fileType: {
      type: String,
      default: 'img'
    },
    img: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgSrc: this.img
    }
  },
  methods: {
    upload(file) {
      const postData = new FormData()
      postData.append('file', file)
      uploadImg(postData).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.imgSrc = res.data
          this.$emit('uploaded', res.data)
        } else {
          this.$message({
            type: 'error',
            message: '上传失败,' + res.msg
          })
        }
      })
    },
    isImg(file) {
      return /\.(png|jpg|jpeg|PNG|JPG|JPEG)$/.test(file.name)
    },
    handleImgClick() {
      this.$refs.imgUpload.click()
    },
    handleUpload(e) {
      const files = e.target.files
      const rawFile = files[0]
      if (rawFile?.size >= 10 * 1024 * 1024) { // 文件最大10M
        this.$message({
          type: 'error',
          message: '请上传10M以内大小的图片'
        })
      }
      if (!rawFile) return
      this.upload(rawFile)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message({
          type: 'error',
          message: '只能拖放一个文件'
        })
        return
      }
      const rawFile = files[0]
      if (!this.isImg(rawFile)) {
        this.$message({
          type: 'error',
          message: '只支持png、jpg和jpeg格式'
        })
        return false
      }
      if (rawFile.size >= 10 * 1024 * 1024) {
        this.$message({
          type: 'error',
          message: '请上传10M以内大小的图片'
        })
      }
      if (!rawFile) return
      this.upload(rawFile)
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.img-upload-input{
  display: none;
}
.view-container {
  display: flex;
  flex-direction: row;
}
.container {
  width: 100px;
  height: 100px;
  border: 1px dotted #ccc;
  &:hover {
    border-color: #409eff;
  }
}
::v-deep .upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  @extend .container;
  .el-button {
    font-size: 20px;
    width: 100%;
    height: 100%;
    .tip-text {
      font-size: 12px;
    }
  }
}
.preview-contain {
  @extend .container;
  display: flex;
  justify-content: flex-start;
  padding: 10px;
  margin-left: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
